/**
 * 系统管理  医院管理
 */
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>医院管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true"  class="user-search">
      <el-form-item label="搜索：">
        <el-input size="small" v-model="hospital.hospitalName" placeholder="输入医院名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit1()">添加</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="listData.slice((pageNum - 1) * pageSize, pageNum * pageSize)" highlight-current-row v-loading="loading" border element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" type="selection" width="60">
      </el-table-column>
      <el-table-column sortable prop="hospitalName" label="医院名称" >
      </el-table-column>
      <el-table-column sortable prop="hospitalAddress" label="医院地址">
      </el-table-column>
      <el-table-column sortable prop="createTime" label="创建时间" >
        <template slot-scope="scope">
          <div>{{scope.row.createTime|timestampToTime}}</div>
        </template>
      </el-table-column>
      <el-table-column sortable prop="modifiedTime" label="修改时间" >
        <template slot-scope="scope">
          <div>{{scope.row.modifiedTime|timestampToTime}}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" >
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="danger" @click="deleteUser(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      :page-sizes="[2, 3, 4, 5, listData.length]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="listData.length">
    </el-pagination>
    <!--编辑医院-->
    <el-dialog :title="title" :visible.sync="editFormVisible1" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="editForm"  ref="editForm">
        <el-form-item label="医院名称" prop="deptName">
          <el-input size="small" v-model="editForm.hospitalName" auto-complete="off" placeholder="请输入医院名称"></el-input>
        </el-form-item>
        <el-form-item label="医院地址" prop="deptNo">
          <el-input size="small" v-model="editForm.hospitalAddress" auto-complete="off" placeholder="请输入医院地址"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm1()">保存</el-button>
      </div>
    </el-dialog>
    <!-- 添加界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%" @click="closeDialog">
      <el-form label-width="120px" :model="addForm"  ref="editForm">
        <el-form-item label="医院名称" prop="deptName">
          <el-input size="small" v-model="addForm.hospitalName" auto-complete="off" ></el-input>
        </el-form-item>
        <el-form-item label="医院地址" prop="deptNo">
          <el-input size="small" v-model="addForm.hospitalAddress" auto-complete="off" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm()">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {hospitalList, hospitalSave, hospitalEdit, hospitalDelete, categorySave} from '../../api/userMG'
import Pagination from '../../components/Pagination'
export default {
  data() {
    return {
      pageNum: 1,
      pageSize: 2,
      nshow: true, //switch开启
      fshow: false, //switch关闭
      loading: false, //是显示加载
      editFormVisible1: false, //添加
      editFormVisible: false, //修改
      title: '添加',
      editForm: {
        hospitalId: '',
        hospitalName: '',
        hospitalAddress: '',
      },
      addForm: {
        hospitalName: '',
        hospitalAddress: '',
      },
      hospital:{},
      listData:[]

    }
  },
  // 注册组件
  components: {
    Pagination
  },
  created() {
    //全查医院
    this.search()
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    //分页
    handleSizeChange(pageSize) {
      this.pageSize = pageSize;
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum;
    },
    // 搜索事件
    search() {
      hospitalList(this.hospital).then(res => {
        this.loading = false
        this.listData = res.data.data.list
        console.log(this.listData)
      })
        .catch(err => {
          this.loading = false
          this.$message.error('医院信息加载失败，请稍后再试！')
        })
    },
    //显示添加界面
    handleEdit1() {
      this.editFormVisible = true
        this.title = '添加'
    },
    //显示修改页面
    handleEdit(row) {
      this.editFormVisible1 = true
        this.title = '修改'
      this.editForm={ ...row};
      console.log(this.editForm)
    },
    // 修改页面保存方法
    submitForm1() {
      this.$confirm('是否修改此医院?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'}).then(() => {
        hospitalEdit(this.editForm).then(res => {
          if (res.code == 20000) {
            this.$message({
              message: "修改成功",
              type: "success",
            });
          }
          this.search()
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改',
        });
        this.editFormVisible1 = false
      });

    },
    // 添加页面保存方法
    submitForm() {
      this.$confirm('是否添加此医院?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'}).then(() => {
        hospitalSave(this.addForm).then(res => {
          if (res.code == 20000) {
            this.$message({
              message: "添加成功",
              type: "success",
            });
          }
          this.search()
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消添加',
        });
        this.editFormVisible = false
        this.addForm={}
      });
    },
    // 删除医院
    deleteUser(row) {
      this.$confirm('是否删除此医院?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'}).then(() => {
        hospitalDelete(row.hospitalId).then(res => {
          if (res.code == 20000) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
          }
          this.search()
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除',
        });
      });
    },
    // 关闭编辑、增加弹出框
    closeDialog() {
      this.editFormVisible = false
      this.editFormVisible1 = false
    }
  }
}
</script>

<style scoped>
.user-search {
  margin-top: 20px;
}
.userRole {
  width: 100%;
}
</style>

